<template>
  <div class="account-center">
    <div class="page-center">
      <a-card :bordered="false" style="width: 100%; border-radius: 6px">
        <div class="box">
          <div class="right-box">
            <a-row class="mb-20">
              <a-col :span="4">
                <a-range-picker v-model:value="time" />
              </a-col>
              <a-col class="ml-10" :span="4">
                <a-input
                  placeholder="请输入关键字"
                  allowClear
                  v-model:value="searchTxt"
                ></a-input>
              </a-col>
              <a-col class="ml-10" :span="2">
                <a-space>
                  <a-button type="primary" @click="queryList">查询</a-button>
                  <!-- <a-button type="primary" @click="exportData">导出</a-button> -->
                </a-space>
              </a-col>
            </a-row>
            <a-table
              :dataSource="list"
              :columns="columns"
              :pagination="pagination"
              @change="handleTableChange"
              rowKey="id"
              :loading="loading"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'cover_img'">
                  <a-popover v-if="record.cover_img">
                    <template #content>
                      <a-image-preview-group>
                        <a-image
                          style="cursor: pointer"
                          :width="50"
                          :src="img"
                          v-for="(img, index) in record.cover_img"
                          :key="index"
                        />
                      </a-image-preview-group>
                    </template>
                    <img
                      style="width: 50px; cursor: pointer"
                      :src="img"
                      v-for="(img, index) in record.cover_img.slice(0, 1)"
                      :key="index"
                    />
                  </a-popover>
                  <div v-else>--</div>
                </template>
                <template v-if="column.key === 'title'">
                  <div class="text-ellipsis">{{ record?.title }}</div>
                </template>
                <template v-if="column.key === 'platform_account_article_log'">
                  <div>
                    {{ record.published.publishedMsg }}
                  </div>
                </template>
                <template v-if="column.key === 'action'">
                  <a-button type="link" @click="showDetail(record)"
                    >详情</a-button
                  >
                </template>
              </template>
            </a-table>
          </div>
        </div>
      </a-card>
    </div>
    <a-drawer
      title="详情"
      :visible="detailVisible"
      :width="800"
      @close="closeDetail"
      :destroyOnClose="true"
      :keyboard="false"
      :maskClosable="true"
      :style="{ position: 'absolute', right: 0 }"
      :body-style="{ padding: '30px', height: 'calc( 100% - 55px )' }"
    >
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane :key="1" tab="作品详情">
          <a-form layout="vertical">
            <a-form-item>
              <template #label>
                <span class="label-title">发布状态</span>
              </template>

              <span> {{ detail.published.publishedMsg }}</span>
            </a-form-item>
            <a-form-item>
              <template #label>
                <span class="label-title">标题</span>
              </template>
              {{ detail.article.title }}
            </a-form-item>
            <a-form-item>
              <template #label>
                <span class="label-title">封面</span>
              </template>
              <a-image-preview-group>
                <a-image
                  style="cursor: pointer"
                  :width="100"
                  :src="img"
                  v-for="(img, index) in detail.article.cover_img || []"
                  :key="index"
                />
              </a-image-preview-group>
            </a-form-item>

            <a-form-item>
              <template #label>
                <span class="label-title">内容</span>
              </template>
              <div v-html="detail.article.desc"></div>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="发布详情" force-render>
          <a-table
            :dataSource="detail.article_log"
            :columns="airtileColumns"
            rowKey="id"
            :loading="loading"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'nickname'">
                {{ record.platform_account_user.nickname }}
              </template>
              <template v-if="column.key === 'source_txt'">
                {{ record.platform_account_user.source_txt }}
              </template>
              <template v-if="column.key === 'execute_json'">
                {{ record.execute_json?.msg ? record.execute_json?.msg : "--" }}
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<script>
import {
  ref,
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
  inject,
} from "vue";
import request from "@/common/utils/request";
import { Form, Modal, notification, message } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import moment from "moment";

const useForm = Form.useForm;
export default defineComponent({
  name: "userSetting",
  components: {},

  setup() {
    const state = reactive({
      activeKey: 1,
      total: 0,
      dLoading: false,
      searchTxt: "",
      detail: {
        article: {
          cover_img: "",
          desc: "",
          title: "",
        },
        article_log: [],
        published: {
          publishedMsg: "",
        },
      },
      detailVisible: false,
      page: 1,
      pageSize: 10,
      time: [],
      currentTab: 1,
      tabList: [
        { id: 1, name: "我的发布" },
        // {id:2,name:"我的创作"},
        // {id:3,name:"我的收藏"},
      ],
      loading: false,
      list: [],
      airtileColumns: [
        {
          title: "账号",
          align: "center",
          dataIndex: "nickname",
          key: "nickname",
        },
        {
          title: "平台",
          align: "center",
          dataIndex: "source_txt",
          key: "source_txt",
        },
        {
          title: "发布状态",
          align: "center",
          dataIndex: "status_txt",
          key: "status_txt",
        },
        {
          title: "失败原因",
          align: "center",
          dataIndex: "execute_json",
          key: "execute_json",
        },
      ],
      columns: [
        {
          title: "序号",
          align: "center",
          key: "id",
          dataIndex: "id",
        },
        {
          title: "封面",
          align: "center",
          key: "cover_img",
          dataIndex: "cover_img",
        },
        {
          title: "标题",
          align: "center",
          key: "title",
          dataIndex: "title",
          width: 200,
          key: "title",
        },
        {
          title: "创建时间",
          key: "created_at",
          dataIndex: "created_at",
          align: "center",
        },
        {
          title: "发布状态",
          key: "platform_account_article_log",
          dataIndex: "platform_account_article_log",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          dataIndex: "action",
          align: "center",
        },
      ],
    });
    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showTotal: (total) => `共${total}条`,
    }));
    const getList = () => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
        keyword: state.searchTxt,
      };
      if (state.time.length) {
        params.created_start_time = moment(state.time[0]).format("YYYY-MM-DD");
        params.created_end_time = moment(state.time[1]).format("YYYY-MM-DD");
      }
      state.loading = true;
      request
        .get("/work_ai", "/org/platform/account/article/list", params)
        .then((res) => {
          state.list = res.list;
          state.total = res.total;
          state.loading = false;
        });
    };

    const tabChange = (tab) => {
      state.currentTab = tab;
    };
    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getList();
    };
    getList();

    const queryList = () => {
      state.page = 1;
      getList();
    };
    const getStatus = (data) => {
      let status = true;
      let successCount = 0;
      let failCount = 0;
      data.map((item) => {
        if (item.status != 2) {
          failCount++;
          status = false;
        } else {
          successCount++;
        }
      });
      return {
        status,
        failCount,
        successCount,
      };
    };
    const showDetail = (detail) => {
      getDetail(detail.id);
      state.detailVisible = true;
    };
    const getDetail = (id) => {
      let params = {
        id,
      };

      state.dLoading = true;
      request
        .get("/work_ai", "/org/platform/account/article/get", params)
        .then((res) => {
          console.log(res, "resresres");

          state.detail = res.result;
          state.dLoading = false;
        });
    };
    const exportData = () => {
      let params = {
        // page:state.page,
        // pageSize:state.pageSize,
        keyword: state.searchTxt,
      };
      if (state.time.length) {
        params.created_start_time = moment(state.time[0]).format(
          "YYYY-MM-DD HH:mm"
        );
        params.created_end_time = moment(state.time[1]).format(
          "YYYY-MM-DD HH:mm"
        );
      }

      request
        .downLoad("/work_ai", "/org/platform/account/article/export", params)
        .then((res) => {
          console.log(res);
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", res.fileName || "excel.xlsx");

          document.body.appendChild(link);
          link.click();
        })
        .catch((err) => {
          message.error("导出失败");
        });
    };
    const closeDetail = () => {
      state.detailVisible = false;
      state.activeKey = 1;
    };
    return {
      ...toRefs(state),
      tabChange,
      handleTableChange,
      queryList,
      getStatus,
      showDetail,
      exportData,
      pagination,
      closeDetail,
    };
  },
});
</script>

<style lang="less" scoped>
.account-center {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}

.box {
  display: flex;
}
.left-box {
  width: 200px;
  border-right: 1px solid #e8e8e8;
  margin-right: 20px;
}
.right-box {
  flex: 1;
}
.tab-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tab-item {
  width: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 10px;
}
.active-tab {
  color: #938bff;
  background-color: #f7f0ff;
}
.ellispis {
  // 文本省略号
  width: 200px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.label-title {
  font-weight: 600;
}
</style>
